// 上传照片列表
<template>
    <v-accordion 
        class="qzjx-accordion" 
        :opened="opened"
    >
        <div slot="title" class="title-box">
            <div class="index">{{ index + 1 }}</div>
            <div class="title" v-if="item&&options">{{ item[options.name] }}</div>
        </div>
        <div class="v-check-list">
            <div class="upload-box">
                <ul class="pic_upload_ul">
                    <!-- <li v-for="(citem,cindex) in item.fileList" :key="citem" @click="openDbFile(citem,cindex,item.fileList)">
                        <img :src="$util.getImgSrc(citem)" alt="">
                    </li> -->
                    <template v-if="item&&item.fileList.length>0">
                        <li class="img-boxs" @click="openDbFile(item.fileList[0],0,item.fileList)">
                            <img :src="$util.getImgSrc(item.fileList[0])" alt="">
                            <span v-if="item.fileList.length>1" class="indexPos">{{item.fileList.length}}</span>
                        </li>
                    </template>
                    <slot name="content"></slot>
                </ul>
            </div>
            <div style="margin-top: 15px" v-if="$slots.btn">
                <slot name="btn"></slot>
            </div>
        </div>
    </v-accordion>
</template>

<script>
import Config from '@/libs/config.js'
export default {
    name: 'v-picture-items',
    props: {
        index: {
            type: Number,
        },
        item: {
            type: Object,
            default: () => {},
        },
        listName: {
            type: String,
        },
        dataKey: {
            type: String,
        },
        bizType: {
            type: String,
        },
        options: {
            type: Object,
            default: () => {
                return { name: 'name' }
            },
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        // 是否展开
        opened:{
            type:Boolean,
            default:true
        }
    },
    data() {
        return {
            download: Config.api.download,
        }
    },
    methods: {
        openDbFile (fileId,index,dbfiles) {
            var self = this;
            let file = {
                filename: '',
                downloadurl: `${this.download}?attachmentId=${fileId}`,
                attachmentId:fileId
            };
            let photos = [];
            
            if(window.qmSdk){
                dbfiles.forEach((f) => {
                    photos.push(self.download + "?attachmentId=" + f + '&championsoft=' + encodeURIComponent(this.$f7.data.authToken));
                });
                // window.qmSdk.scanFile(file);
                window.qmSdk.showPhotos({
                    imgs: photos, // 图片地址数组，必填
                    index: 0, // 从第几个开始浏览，必填
                    success: function () { },
                    fail: function (err) { }
                })
            }else if(process.env.CONFIG_TYPE.includes('UM_PROD')&&umSdk && umSdk.status == 'ready'){
                dbfiles.forEach((f) => {
                    photos.push(self.download + "?attachmentId=" + f + '&championsoft=' + encodeURIComponent(this.$f7.data.authToken));
                });
                umSdk.showPhotos({
                    imgs: photos, // 图片地址数组，必填
                    index: 0, // 从第几个开始浏览，必填
                    success: function () { },
                    fail: function (err) { }
                })
            }else{
                dbfiles.forEach((f) => {
                    photos.push({
                        url: self.download + "?attachmentId=" + f + '&championsoft=' + encodeURIComponent(self.$f7.data.authToken),
                        caption: f+'.png',
                        attachmentId: f
                    });
                });
                var photoIndex = photos.indexOf(photos.find((v) => v.attachmentId == file.attachmentId));
                if (photoIndex != null && photoIndex != -1) {
                    index = photoIndex;
                }
                if (photos.length !== 0) {
                    var photoBrowser = self.$f7.photoBrowser.create({
                        photos: photos,
                        type: "popup",
                        popupCloseLinkText: "关闭",
                    });
                    photoBrowser.open(index || 0);
                    photoBrowser.on("closed", () => {
                        photoBrowser.destroy();
                    });
                }
            }
        },
    },
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/css/commonPage.less');

@{deep}.accordion .accordion-item > .item-link > .item-content {
    padding-left: 16px !important;
}

.picList .infoList {
    margin-top: 10px;
}

li {
    &.content-box {
        padding: 0;
        margin: 0;
        background: transparent !important;
        box-shadow: none;
    }
    &:first-child .content-box {
        margin-top: 0;
    }

    .content-box {
        background: #fff;
        margin-bottom: 0;
        align-items: flex-start;
        box-shadow: none;
        padding: 10px 0;
    }

    .index-box {
        background: rgba(51, 133, 255, 0.1);
        border-radius: 1px;
        font-size: 13px;
        color: #1990ff;
        width: 25px;
        height: 22px;
        text-align: center;
        line-height: 22px;
    }

    .right-box {
        margin-left: 10px;
        font-size: 14px;
        color: #333;
    }

    .checks-box {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;

        .code {
            flex: 1;
            margin-bottom: 10px;
        }
    }
    /deep/.pic_upload {
        padding: 0;
        margin: 0;
    }
}
.pic_upload{
    display: flex;
    flex-wrap: wrap;
    li{
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.qzjx-accordion.accordion{
    &:first-child{
        margin-top: 0!important;
    }
    &:last-child{
        margin-bottom: 0!important;
    }
    .index{
        flex-shrink: 0;
        width: 25px;
        height: 22px;
        background: rgba(51, 133, 255, 0.1);
        color: @mainColor;
        margin-right: 15px;
        text-align: center;
        line-height: 22px;
        font-size: 12px;
    }
  .title-box{
    display: flex;
    align-items: center;
    .title,.index{
      font-weight: 400;
    }
  }
  .v-check-list{
    padding: 8px 15px 15px 55px;
  }
  /deep/.accordion-item-content::before{
    display: none;
  }
}
.pic_upload_ul{
    .img-boxs{
        position: relative;
        .indexPos{
            position: absolute;
            right: 6px;
            bottom: 6px;
            width: 20px;
            height: 20px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            color: #ffffff;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
        }
    }
}
</style>
